const uls = document.querySelectorAll("ul");

uls.forEach((ul) => {
  const resetClass = ul.parentNode.getAttribute("class");
  const lis = ul.querySelectorAll("li");

  lis.forEach((li) => {
    li.addEventListener("click", (e) => {
        console.log(33333);
      e.preventDefault();
      e.stopPropagation();
      const target = e.currentTarget;

      if (target.classList.contains("active")) {
        return;
      }

      ul.parentNode.setAttribute(
        "class",
        `${resetClass} ${target.getAttribute("data-where")}-style`
      );

      lis.forEach((item) => clearClass(item, "active"));

      setClass(target, "active");
    });
  });
});

function clearClass(node,className) {
    node.classList.remove(className)
}

function setClass(node,className) {
    node.classList.add(className)
}
